<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            width: 200px;
            height: 250px;
            padding: 10px;
            margin: 10px;
            float: left;
            border: 1px solid #ccc;
            list-style: none;
        }
        li img{
            width: 180px;
            height: 150px;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
           <img src="https://img1.baidu.com/it/u=3081487415,1173237293&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380" alt="">
           <p>蜡笔小新</p>
           <strong>11111</strong>
        </li>
        
    </ul>
</body>
</html>
<script>
    // 模拟一份商品数据 表示后端给我们的数据
    // 因为存在多个商品 所以需要使用数组格式保存
    // 因为每一个商品都存在多个信息需要表示  可以使用对象结构
    // 最终使用数组 元素值为对象的格式
    let data =[
        {
            name:'OPPO Axxx',
            price:300,
            goodsThumb:'https://img1.baidu.com/it/u=3081487415,1173237293&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380'
        },
        {
            name:'mac pro',
            price:16999,
            goodsThumb:'https://img.soogif.com/TTEAAItglAIsT4NDUzNErtrQrmqFmxyx.jpeg_s400x0'
        }
    ];
    // 只需要以数据为基准 组装出一个满足格式邀请的li标签 最终将ul标签中内容覆盖掉
    let html = '';
    for(let goods of data){
        html += '<li><img src="'+goods.goodsThumb+'" alt=""><p>'+goods.name+'</p><strong>'+goods.price+'</strong></li>';
    }
    document.querySelector('ul').innerHTML = html;


</script>